<template>
    <el-collapse>
        <el-collapse-item name="1" class="collapse">
            <template #title>
                <span class="collapseTitle">
                    扩展组合组件
                </span>
            </template>
            <div>
                <draggable
                    :list="list"
                    ghost-class="ghostClass"
                    chosen-class="chosenClass"
                    animation="300"
                    :force-fallback="true"
                    :sort="false"
                    :group="{name:'lowcode',pull:'clone',put:false}"
                    @start="onStart"
                    :clone="cloneDefaultField"
                    item-key="sourceId"
                >
                    <template #item="{ element }">
                        <div class="itemClass">
                            {{ element.name }}
                        </div>
                    </template>
                </draggable>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import draggable from "vuedraggable";
import {deepCopy} from "@/utils/tagCreate";

export default {
    name: "ExtensionIndex",
    components: {
        draggable
    },
    data() {
        return {
            list: [
                {
                    name: "表格多选框支持搜索", title: "按钮编辑", component: "TableSelectionSearchComponent", drawerComponent: "TableSelectionSearchDrawer", sourceId: 1,
                    propJson: {
                        editFlag: true,
                        tableDataType: "custom",
                        tableDataCustomType: "Array",
                        tableDataCustomInfo: "[{\"id\": \"001\", \"name\": \"zhangsan\",\"age\": 20},{\"id\": \"002\", \"name\": \"lisi\",\"age\": 22},{\"id\": \"003\", \"name\": \"wangwu\",\"age\": 23}]",
                        tableFieldList: [{variableLabel: "ID", showType: "variable", customHTML: "", variableField: "id", isAlignCenter: "left"},{variableLabel: "姓名", showType: "variable", customHTML: "", variableField: "name", isAlignCenter: "left"}],
                        tableSelectField: [],
                        selectVarParamName: "",
                        tableDataVariableParam: "",
                        apiType: "MSOA",
                        apiPath: "",
                        apiMethod: "GET",
                        queryListRequestList: [],
                        responseJsonPath: "",
                        selectedDataType: "custom",
                        selectedDataCustomInfo: "",
                        selectedDataCustomType: "Array",
                        selectedDataVariableParam: "",
                        selectedApiType: "MSOA",
                        selectedApiPath: "",
                        selectedApiMethod: "GET",
                        selectedListRequestList: [],
                        selectedResponseJsonPath: "",
                        selectedMatchField: "",
                        submitActionList: []
                    }
                },
                {
                    name: "MarkDown编辑器", title: "MarkDown编辑器编辑", component: "MarkDownComponent", drawerComponent: "MarkDownDrawer", sourceId: 2,
                    propJson: {
                        editFlag: true,
                        subfield: "double", // 分栏设置 one - 单栏 double - 双栏
                        defaultOpen: "edit", // 默认开启方式 edit - 编辑栏  preview - 预览区
                        placeholder: "开始编辑…", // 编辑栏数据为空时展示的数据
                        editable: true, // 是否允许编辑
                        toolbarsFlag: true, // 工具栏是否展示
                        ishljs: true, // 代码是否高亮
                        height: "80vh", // 编辑器高度
                        bindVariable: "", // 绑定参数
                        isBoxShadow: true, // 是否展示背景阴影
                        htmlBindVariable: "", // html绑定参数
                        actionInfo: {optionValueType: "custom", optionsCustom: "自定义内容", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}, // 文本类容关联
                        toolbars: {
                            bold: true, // 工具栏 - 粗体
                            italic: true, // 工具栏 - 斜体
                            header: true, // 工具栏 - 标题
                            underline: true, // 工具栏 - 下划线
                            strikethrough: true, // 工具栏 - 中划线
                            mark: true, // 工具栏 - 标记
                            superscript: true, // 工具栏 - 上角标
                            subscript: true, // 工具栏 - 下角标
                            quote: true, // 工具栏 - 引用
                            ol: true, // 工具栏 - 有序列表
                            ul: true, // 工具栏 - 无序列表
                            link: true, // 工具栏 - 链接
                            imagelink: true, // 工具栏 - 图片链接
                            code: true, // 工具栏 - code
                            table: true, // 工具栏 - 表格
                            fullscreen: true, // 工具栏 - 全屏编辑
                            readmodel: true, // 工具栏 - 沉浸式阅读
                            htmlcode: true, // 工具栏 - 展示html源码
                            help: true, // 工具栏 - 帮助
                            undo: true, // 工具栏 - 上一步
                            redo: true, // 工具栏 - 下一步
                            trash: true, // 工具栏 - 清空
                            save: true, // 工具栏 - 保存（触发events中的save事件）
                            navigation: true, // 工具栏 - 导航目录
                            alignleft: true, // 工具栏 - 左对齐
                            aligncenter: true, // 工具栏 - 居中
                            alignright: true, // 工具栏 - 右对齐
                            subfield: true, // 工具栏 - 单双栏模式
                            preview: true, // 工具栏 - 预览
                        },
                        imageInnerVariable: [{ // 上传图片内置变量
                            name: "内置参数 file",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        }],
                        returnUrlJsonPath: "", // 返回参数URL地址数据
                        doUploadAction: {apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: []}, // 上传图片动作
                        isRelateMarkDownDir: false, // 是否关联markDown外部菜单
                        markDownVariable: "", // 如果关联外部菜单时，需要暴露markDown容器Element对象
                    }
                },
                {
                    name: "MarkDown目录", title: "MarkDown目录编辑", component: "MarkDownDirectoryComponent", drawerComponent: "MarkDownDirectoryDrawer", sourceId: 3,
                    propJson: {
                        editFlag: true,
                        markDownVariable: "", // markDown容器对象存储字段
                        height: "", // 目录高度
                    }
                },
                {
                    name: "菜单列表", title: "菜单列表编辑", component: "MenuListComponent", drawerComponent: "MenuListDrawer", sourceId: 4,
                    propJson: {
                        editFlag: true,
                        listHeight: "", // 菜单列表的高度
                        // 获取列表的数据
                        actionInfo: {optionValueType: "custom", optionsCustom: "[{\"index\": 1, \"title\": \"列表数据\"}]", optionsCustomValueType: "Object", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                        defaultActiveActionInfo: {optionValueType: "custom", optionsCustom: "自定义内容", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                        menuIndex: "$.index", // 列表个体唯一标识字段
                        isClickAction: false, // 是否开启菜单点击事件
                        clickAction: [{isAsyncAction: false}], // 菜单点击事件
                        menuTitle: "$.title", // 菜单标题字段
                        subMenuFieldName: "", // 子列表字段名称
                        backgroundColor: "#545c64", // 背景色
                        textColor: "#fff", // 字体颜色
                        activeTextColor: "#ffd04b", // 菜单激活时的字体颜色
                        menuClickInnerRequestVariable: [{ // 点击请求时的url内置变量
                            name: "内置参数 menuIndex",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        }, {
                            name: "内置参数 menuTitle",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        }, {
                            name: "内置参数 item",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        }],
                    }
                },
                {
                    name: "可编辑表格", title: "可编辑表格编辑", component: "EditableTableListComponent", drawerComponent: "EditableTableListDrawer", sourceId: 5,
                    propJson: {
                        editFlag: true,
                        tableDataVariable: "", // 动态表格数据关联的变量
                        // 表格的字段
                        tableFieldList: [
                            {variableLabel: "ID", variableField: "id", isAlignCenter: "left", isEditor: false, editorType: "input",
                                isDisable: false, // 是否禁用
                                optionLabel: "$.label", // 下拉菜单label
                                optionValue: "$.value", // 下拉菜单value
                                isOptionClickAction: false, // 是否点击触发下拉查询
                                actionInfo: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "Array", optionsVariableParam: "",
                                    apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                                    isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}},
                            {variableLabel: "姓名", variableField: "name", isAlignCenter: "left", isEditor: false, editorType: "input",
                                isDisable: false, // 是否禁用
                                optionLabel: "$.label", // 下拉菜单label
                                optionValue: "$.value", // 下拉菜单value
                                isOptionClickAction: false, // 是否点击触发下拉查询
                                actionInfo: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "Array", optionsVariableParam: "",
                                    apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                                    isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}}
                        ],
                        isBorder: false, // 外边框线
                        isStripe: false, // 斑马纹
                        isOverFlowTip: false, // 溢出提示
                        isMaxHeight: false, // 最大高度
                        maxHeight: "", // 最大高度
                        isSelection: false, // 是否添加复选列
                        selectVarParamName: "", // 复选列管理的变量
                        operationWidth: 300, // 操作列的宽度
                        isAddData: true, // 是否可添加
                        isDeleteData: true, // 是否可删除
                        isSonTable: false, // 是否支持内嵌表格
                        sonTableName: "", // 内嵌表格数组的字段名称
                        sonTableTypeName: "", // 内嵌表格标识的字段名称
                        isAddSonTable: false, // 是否可添加内嵌表格
                    }
                }
            ]
        }
    },
    methods: {
        cloneDefaultField(e) {
            return deepCopy(e);
        },
        onStart(e) {
            e.item._underlying_vm_.id = this.generateUUID();
        },
        randomNumber() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        },
        generateUUID() {
            return (this.randomNumber() + this.randomNumber() + "-" + this.randomNumber() + "-" + this.randomNumber() +
                "-" + this.randomNumber() + "-" + this.randomNumber() + this.randomNumber() + this.randomNumber());
        }
    }
}
</script>

<style scoped lang="less">
.collapse {
    .collapseTitle {
        padding-left: 2%;
        font-size: 15px;
        font-weight: bold;
    }
    .ghostClass {

    }
    .chosenClass {

    }
    .itemClass {
        font-size: 13px;
        color: #606266;
        text-align: center;
        width: 90%;
        line-height: 250%;
        margin-left: 5%;
        //去除光标
        caret-color: transparent;
        background-color: #FAFCFF;
        transition: box-shadow 0.3s ease;
        border: 1px solid #F0F2F5;
        border-radius: 5px;
        margin-bottom: 2%;
    }
    .itemClass:hover{
        cursor: pointer;
        color: #409EFF;
        background-color: #EBEEF5;
    }
}
</style>